import React from "react";
import ReactDOM from "react-dom";
import { render } from "./render";
import App from "./App";

//!引入时一定要有文件，否则会报错

// todo 命名导出时，引入时需要加{}，变量名必须和导出时一样，引入和导出的都是一个模块

// todo 默认导出时，不用加{}，前面的变量名可以任意取

// import 引入的时候,js扩展名可以省略

//*模块(js)：将一个js文件拆分成多个js文件

// ?组件(html,css,js)：基于模块
// 包含页面的一块内容，将整个页面拆成多个文件，一个组件就是页面中的一块内容

//!index.js是入口文件，必须有，其他的都可以自定义
// import reportWebVitals from './reportWebVitals';

// const str = "9086tyb";

// !jsx实质就是一个对象，描述了该元素
// const ele = (
//     <div id="box">
//         <h1> hello </h1>
//         <p> 马上就要开学了！ </p>
//         <div>{str}</div>
//     </div>
// );

const ele = (
    <div>
        <h1>当前时间</h1>
        <div>{new Date().toLocaleTimeString()}</div>
    </div>
);
console.log(ele);

const ele4 = (
    <h1 id="box2" className="title">
        //!虚拟的dom节点，执行的时候会转为react.createElement()函数来执行
        <div>hello1</div>
        <div>hello2</div>
        <div>hello3</div>
        <div>
            <li>123</li>
            <li>456</li>
            <li>678</li>
        </div>
    </h1>
);

ReactDOM.render(
    //!管理整个页面的内容，render函数的第一个参数是要渲染的内容，第二个参数是渲染的位置
    //!必须要执行，否则页面会没有内容
    <App />,
    // <div>hello</div>,
    // <h1>hello<p>1234</p></h1>,
    // ele,
    document.getElementById("root")
);

render(ele4, document.getElementById("root"));

/* const ele2 = React.createElement("h1", { id: 'bod' }, 'hello');
const ele3 = {
    type: "h1",
    props: {
        id: "bod",
        children: "hello",
        className: "title",
    },
}; */

// *通用写法
/* const render = (element, container) => {
    // ?解构赋值
    const { type, props } = element;
    //创建元素
    const el = document.createElement(type);
    //遍历属性
    Object.keys(props).forEach((attr) => {
        if (attr == "children") {
            const child = props["children"];
            if (typeof child == "string") {
                el.innerText = child;
            } else if (child instanceof Array) {
                child.forEach((item) => {
                    if (typeof item == "string") {
                        const txt = document.createTextNode(item);
                        el.appendChild(txt);
                    } else {
                        render(item, el);
                    }
                });
            } else {
                render(child, el);
            }
        } else {
            el[attr] = props[attr];
        }
    });
    // 添加元素
    container.appendChild(el);
}; */

//!常规的写法，有局限性，只适应传入参数为对象
/* const render = (element, container) => {
    var n = document.createElement(element.type);
    var text = document.createTextNode(element.props.children)
    container.appendChild(text);
    n.setAttribute("id", element.props.id);
}
*render(ele3, document.getElementById('root'));

const ele1=React.createElement('div',{id:'box'},'hello');
console.log(ele1); */
